<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>营销管理</el-breadcrumb-item>
            <el-breadcrumb-item>优惠券</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">优惠券</h3>
          <el-form :inline="true"  class="demo-form-inline" style="text-align: left" ref="searchbox">
            <el-form-item label="优惠卷名称">
              <el-input v-model="name" placeholder="请输入标签名称"></el-input>
            </el-form-item>
            <el-form-item label="优惠券类型">
              <el-select v-model="typeId" placeholder="请选择优惠券类型">
                <el-option :label="item.coupontypename" :value="item.id" v-for="item in couponTypeList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="适用渠道">
              <el-select v-model="channel" placeholder="请选择适用渠道">
                <el-option label="全部" value="0"></el-option>
                <el-option label="微信商城" value="1"></el-option>
                <el-option label="APP商城" value="2"></el-option>
                <el-option label="线下店铺" value="3"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="status" placeholder="请选择优惠券状态">
                <el-option label="全部" value="0"></el-option>
                <el-option label="未开始" value="1"></el-option>
                <el-option label="进行中" value="2"></el-option>
                <el-option label="已结束" value="3"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button  @click="resetBox">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      <el-card style="margin-top: 30px">

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">优惠卷列表
              <div style="float: right;margin-right: 30px;">
                <el-button type="primary" size="mini" @click="showAdd">新建</el-button>
              </div>
            </h3>
            <el-table :data="CouponVoList" border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="优惠券名称" prop="couponname"></el-table-column>
              <el-table-column label="优惠券类型" prop="couponType.coupontypename"></el-table-column>
              <el-table-column label="使用范围">全场通用</el-table-column>
              <el-table-column label="优惠券状态" prop="status">
                <template slot-scope="scope">
                  <b style="color:#0000ff" v-show="scope.row.status==1">{{caseStatusArr[1]}}</b>
                  <b style="color:#3cb371" v-show="scope.row.status==2">{{caseStatusArr[2]}}</b>
                  <b style="color:#ff0000" v-show="scope.row.status==3">{{caseStatusArr[3]}}</b>
                </template>
              </el-table-column>
              <el-table-column label="适用渠道" prop="channel">
                <template slot-scope="scope">
                  <b v-show="scope.row.channel==1">微信商城</b>
                  <b v-show="scope.row.channel==2">APP商城</b>
                  <b v-show="scope.row.channel==3">线下商铺</b>
                </template>
              </el-table-column>
              <el-table-column label="开始时间" prop="effectivetimestart"></el-table-column>
              <el-table-column label="结束时间" prop="effectivetimeend"></el-table-column>
                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
                        <el-button type="info" size="mini" @click="showData(scope.row.id)">数据</el-button>
                        <el-button type="warning" size="mini" @click="showChange(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" v-show="scope.row.status==2" @click="stopIt(scope.row.id)">停用</el-button>
                        <el-button type="success" size="mini" v-show="scope.row.status==1" @click="startIt(scope.row.id)">开始</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>

      <!--添加优惠券-->
      <el-dialog title="添加优惠券" :visible.sync="addDialogVisible" width="50%" @close="cancelAdd">
        <el-form
            :model="addForm"
            :rules="addFormRules"
            ref="addUserFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="优惠券名称:" prop="couponname" placeholder="请输入优惠券名称">
            <el-input v-model="addForm.couponname"></el-input>
          </el-form-item>
          <el-form-item label="优惠券类型:" prop="coupontypeid">
            <el-select v-model="addForm.coupontypeid" placeholder="请选择优惠券类型">
              <el-option :label="item.coupontypename" :value="item.id" v-for="item in couponTypeList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发放数量:" prop="num">
            <el-input v-model="addForm.num"></el-input>
          </el-form-item>
          <el-form-item label="适用渠道">
            <el-select v-model="addForm.channel" placeholder="请选择适用渠道" prop="channel">
              <el-option label="微信商城" value="1"></el-option>
              <el-option label="APP商城" value="2"></el-option>
              <el-option label="线下店铺" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="使用门槛" prop="threshold" placeholder="请输入使用门槛，若为空则无门槛" >
            <el-input v-model="addForm.threshold"></el-input>
          </el-form-item>

          <el-form-item label="满减金额" prop="reduce"  v-show="addForm.coupontypeid==1">
            <el-input v-model="addForm.reduce"></el-input>
          </el-form-item>

          <el-form-item label="折扣倍率(小数)" prop="reduce" v-show="addForm.coupontypeid==2">
            <el-input v-model="addForm.rate"></el-input>
          </el-form-item>

          <el-form-item label="适用日期" placeholder="请选择适用日期" >
            <div class="block">
              <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
          </el-form-item>


        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doAdd">确 定</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </span>
      </el-dialog>


      <!--修改优惠券-->
      <el-dialog title="添加优惠券" :visible.sync="changeDialogVisible" width="50%" @close="cancelChange">
        <el-form
            :model="changeForm"
            :rules="addFormRules"
            ref="addUserFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="优惠券名称:" prop="couponname" placeholder="请输入优惠券名称">
            <el-input v-model="changeForm.couponname"></el-input>
          </el-form-item>
          <el-form-item label="优惠券类型:" prop="coupontypeid">
            <el-select v-model="changeForm.coupontypeid" placeholder="请选择优惠券类型">
              <el-option :label="item.coupontypename" :value="item.id" v-for="item in couponTypeList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发放数量:" prop="num">
            <el-input v-model="changeForm.num"></el-input>
          </el-form-item>
          <el-form-item label="适用渠道" prop="channel">
            <el-select v-model="changeForm.channel" >
              <el-option :label="item.label" :value="item.id" v-for="item in channelList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="使用门槛" prop="threshold" placeholder="请输入使用门槛，若为空则无门槛" >
            <el-input v-model="changeForm.threshold"></el-input>
          </el-form-item>

          <el-form-item label="满减金额" prop="reduce"  v-show="changeForm.coupontypeid==1">
            <el-input v-model="changeForm.reduce"></el-input>
          </el-form-item>

          <el-form-item label="折扣倍率(小数)"  prop="rate"  v-show="changeForm.coupontypeid==2">
            <el-input v-model="changeForm.rate"></el-input>
          </el-form-item>

          <el-form-item label="适用日期" placeholder="请选择适用日期" >
            <div class="block">
              <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
          </el-form-item>


        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doChange">确 定</el-button>
        <el-button @click="cancelChange">取 消</el-button>
      </span>
      </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                typeId:'',
                name:'',
                channel: '',
                status:'',
                CouponVoList:[],
                couponTypeList:[],
                channelList:[
                  {
                    id:1,
                    label:"微信商城"
                  },
                  {
                    id:2,
                    label:"APP商城"
                  },
                  {
                    id:3,
                    label:"线下商铺"
                  },
                ],
                caseStatusArr:{
                  1:"未开始",
                  2:"进行中",
                  3:"已结束",
                },
                addDialogVisible: false,
                addForm: {
                  couponname:'',
                  coupontypeid:'',
                  num:'',
                  channel:'',
                  threshold:'',
                  reduce:'',
                  effectivetimestart:'',
                  effectivetimeend:''

                },
                addFormRules: {


                },
                value1: [],
                value2: [],
                changeDialogVisible:false,
                changeForm:{

                },
                CouponData: {},
            };
        },
        methods: {
            startIt(id){
              let url = "coupon/start";
              console.log(id);
              this.$axios.delete(url,{
                params:{
                  id:id,
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.reloadData();
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            stopIt(id){
              let url = "coupon/stop";
              console.log(id);
              this.$axios.delete(url,{
                params:{
                  id:id,
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.reloadData();
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            showData(id){
              let url = "coupon/getData";
              this.$axios.get(url,{
                params:{
                  id:id,
                }
              }).then(res=>{
                if (res.data.code == 200){
                  let couponData = res.data.data;
                  this.$router.push({
                    path:"/CouponData",
                    query:{
                      couponData:couponData,
                    }
                  });

                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })

            },
            cancelAdd(){
              this.addDialogVisible = false;
              this.addForm={};
              this.value1=[];
            },
            cancelChange(){
              this.changeDialogVisible = false;
              this.changeForm={};
              this.value2=[];
            },
            doChange(){
              this.changeForm.effectivetimestart = this.value2[0];
              this.changeForm.effectivetimeend = this.value2[1];
              let url = "coupon/change";
              this.$axios.put(url,this.changeForm).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.changeDialogVisible = false;
                  this.value2=[];
                  this.reloadData();
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            showChange(id){
              this.changeDialogVisible = true;
              let url = "coupon/findById";
              this.$axios.get(url,{
                params:{
                  id:id,
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })

                  this.changeForm = res.data.data;
                  this.value2[0] = this.changeForm.effectivetimestart;
                  this.value2[1] = this.changeForm.effectivetimeend;



                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })

            },
            doAdd(){
              this.addForm.effectivetimestart = this.value1[0];
              this.addForm.effectivetimeend = this.value1[1];
              let url = "coupon/add";
              this.$axios.post(url,this.addForm).then(res=>{
                if (res.data.code == 200) {
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.addDialogVisible = false;
                  this.addForm = {};
                  this.value1 = [];
                  this.reloadData();
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })


            },
            showAdd(){
              this.addDialogVisible = true;
            },
            resetBox(){
                this.typeId="";
                this.name="";
                this.channel="";
                this.status="";
                this.getCoupon();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getCoupon();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getCoupon();
            },
            search(){
              this.pageNum = 1;
              this.getCoupon();
            },
            getCouponType(){
              let url = "couponType/showAll";
              this.$axios.get(url).then(res=>{
                this.couponTypeList = res.data.data;
              })
            },
          //初始化所有优惠券
            getCoupon(){
              let url = "coupon/showCoupon";
              this.$axios.get(url,{
                params:{
                  now:this.pageNum,
                  size:this.pageSize,
                  name:this.name,
                  typeId:this.typeId,
                  channel:this.channel,
                  status:this.status,
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.CouponVoList = res.data.data.list;
                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize;
                  this.total = res.data.data.total;

                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              });
            },

            reloadData() {
              this.getCoupon();
            }
        },
        created() {
            this.reloadData();
            this.getCouponType();

        }
    };
</script>
<style lang="less" scoped>
</style>